<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <th:block th:include="include :: header('报表')" />
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>月业绩报表折线图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echart-1"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>月房型业绩折线图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echart-2"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>月房型业绩饼图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echart-3"></div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>月房型业绩柱状图</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="echarts" id="echart-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script>
        function initTable(json) {
            var echart1 = echarts.init(document.getElementById("echart-1"));
            var echart1option = {
                title: {
                    text: '月业绩'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['每日访问量']
                },
                grid: {
                    x: 40,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: json["yb"][0].slice(0,-1)
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '最高访问量',
                        type: 'line',
                        data: json["yb"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
                ]
            };
            echart1.setOption(echart1option);
            $(window).resize(echart1.resize);

            var echart2 = echarts.init(document.getElementById("echart-2"));
            var echart2option = {
                title: {
                    text: '月房型业绩'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['单人间（普通房）','双人间（普通房）','单人间（豪华房）','双人间（豪华房）']
                },
                grid: {
                    x: 40,
                    x2: 40,
                    y2: 24
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: json["yb-1"][0].slice(0,-1)
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                //['单人间（普通房）','双人间（普通房）','单人间（豪华房）','双人间（豪华房）']
                series: [
                    {
                        name: '单人间（普通房）',
                        type: 'line',
                        data: json["yb-1"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '双人间（普通房）',
                        type: 'line',
                        data: json["yb-2"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '单人间（豪华房）',
                        type: 'line',
                        data: json["yb-3"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '双人间（豪华房）',
                        type: 'line',
                        data: json["yb-4"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                ]
            };
            echart2.setOption(echart2option);
            $(window).resize(echart2.resize);

	        var echart3 = echarts.init(document.getElementById("echart-3"));
	        var echart3option = {
	            title : {
	                text: '月房型业绩占比',
	                x:'center'
	            },
	            tooltip : {
	                trigger: 'item',
	                formatter: "{a} <br/>{b} : {c} ({d}%)"
	            },
	            legend: {
	                orient : 'vertical',
	                x : 'left',
	                data:['单人间（普通房）','双人间（普通房）','单人间（豪华房）','双人间（豪华房）']
	            },
	            calculable : true,
	            series : [
	                {
	                    name:'月房型业绩',
	                    type:'pie',
	                    radius : '55%',
	                    center: ['50%', '60%'],
	                    data:[
	                        {value:json["yb-1"][1][30], name:'单人间（普通房）'},
	                        {value:json["yb-2"][1][30], name:'双人间（普通房）'},
	                        {value:json["yb-3"][1][30], name:'单人间（豪华房）'},
	                        {value:json["yb-4"][1][30], name:'双人间（豪华房）'}
	                    ]
	                }
	            ]
	        };
            echart3.setOption(echart3option);
            $(window).resize(echart3.resize);


	        var echart4 = echarts.init(document.getElementById("echart-4"));
	        var echart4option = {
	            title : {
	                text: '月房型业绩'
	            },
	            tooltip : {
	                trigger: 'axis'
	            },
	            legend: {
	                data:['单人间（普通房）','双人间（普通房）','单人间（豪华房）','双人间（豪华房）']
	            },
	            grid:{
	                x:30,
	                x2:40,
	                y2:24
	            },
	            calculable : true,
	            xAxis : [
	                {
	                    type : 'category',
	                    data : json["yb-1"][0].slice(0,-1)
	                }
	            ],
	            yAxis : [
	                {
	                    type : 'value'
	                }
	            ],
	            series : [
                    {
                        name: '单人间（普通房）',
                        type: 'bar',
                        data: json["yb-1"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '双人间（普通房）',
                        type: 'bar',
                        data: json["yb-2"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '单人间（豪华房）',
                        type: 'bar',
                        data: json["yb-3"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    },
                    {
                        name: '双人间（豪华房）',
                        type: 'bar',
                        data: json["yb-4"][1].slice(0,-1),
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值' },
                                { type: 'min', name: '最小值' }
                            ]
                        },
                        markLine: {
                            data: [
                                { type: 'average', name: '平均值' }
                            ]
                        }
                    }
	            ]
	        };
            echart4.setOption(echart4option);
            $(window).resize(echart4.resize);


        }
        $.ajax({
            url: '/order/deposit/report',
            type: 'POST',
            success: initTable,
            dataType: 'json'
        });
    </script>
</body>

</html>